<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <title>canvas</title>
    <style>
        body{
            padding:0;
            margin:0;
        }
        canvas{
            background:#eee;
            padding:0;
        }
        div{
            color: #000;
            background: #ddd;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
     <p id="log"></p>
    <script src='../js/ball.js'></script>
    <script src="../js/arrow.js"></script>
    <script src='../js/utils.js'></script>
    <script>
        window.onload = function(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');

            canvas.width = document.body.clientWidth;
            canvas.height = window.screen.availHeight*0.8;
            
            var balls = [],
                numBall = 10,
                canWid = canvas.width,
                canHei = canvas.height;

                //定义10个小球
                for(var i=0; i<numBall; i++){
                    var size = Math.random()*20 + 5,   //颜色
                        color = Math.random()*(0xffffff),   //大小
                        ball = new Ball(size, color);

                    ball.id = "ball_" + i;   //给每个小球一个id
                    ball.radius = Math.random()*30+10;
                    ball.x = Math.random()*canWid;
                    ball.y = Math.random()*canHei;
                    ball.vx = Math.random()*2 - 1;
                    ball.vy = Math.random()*2 - 1;

                    balls.push(ball); //push进数组
                }

                //定义draw函数
                function draw(ball, pos){
                      //让小球加上它的速度值
                      ball.x += ball.vx;
                      ball.y += ball.vy;

                      //判断是否超出边界，不论超出哪一边 这是移除
                     /* if(ball.x - ball.radius > canvas.width ||
                         ball.radius+ball.x <0 ||
                         ball.y - ball.radius > canvas.height ||
                         ball.y+ball.radius < 0){
                         //将超出边界的小球从数组中删除
                          balls.splice(pos, 1);
                          if(balls.length > 0){
                              //将超出的小球的id值输出
                              log.innerHTML += "移除" + ball.id + "<br/>";
                          }else{
                              log.innerHTML = "全部移除";
                          }
                      }*/

                       //判断是否超出边界，不论超出哪一边  然后重置坐标
                        if(ball.x - ball.radius > canvas.width ||
                         ball.radius+ball.x <0 ||
                         ball.y - ball.radius > canvas.height ||
                         ball.y+ball.radius < 0){
                         //将超出边界的小球从数组中删除
                         ball.x = canvas.width/2;
                          ball.y = canvas.height;
                          ball.vx = Math.random()*(2) - 1;
                          ball.vy = Math.random()*(-2) - 1;
                      }

                    ball.draw(context);
                  }
                 //动画循环
                (function drawFrame(){
                    window.requestAnimationFrame(drawFrame, canvas);
                    context.clearRect(0, 0, canvas.width, canvas.height);

                    //定义初始变量 i 为小球的数量, 并且会随着小球的移除减小
                    var i = balls.length;
                    while(i--){
                        draw(balls[i], i);
                    }
                }());
        }
    </script>
</body>
</html>
